import React from 'react';
import * as mobx from 'mobx';
import {observer, inject} from 'mobx-react';
import {withRouter, Route} from 'react-router-dom';
import {List, Icon, Flex} from 'weaver-mobile';
import {Upload, RouteLayout} from 'weaver-mobile-page';
import * as SignUtil from '../../../util/SignUtil';
import * as VariableKeys from "../../../constants/variableKey";
import base from "../../../util/base";
import {getLabel} from '../../../util/common';

/**
 * 附件列表
 */
@inject('wfSignInputStore')
@withRouter
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state={
        }
    }

    componentWillMount() {
        this.getUploadStoresList();
    }

    getUploadStoresList = () => {
        const {wfSignInputStore} = this.props;
        const wfOperateStore = base.wfOperateStore;
        const {markInfo = {}} = wfOperateStore;
        const signParams = mobx.toJS(markInfo);
        const {annexmaxUploadImageSize = 5} = signParams;

        //附件拖拽相关控制开始，
        const {remarkInfo = {}} = signParams;
        const {isdragula = false, isrename = false} = remarkInfo;
        if(isdragula && isrename) {
            const {isForwad} = wfSignInputStore;
            const annexDataKey = isForwad ? VariableKeys.FORWARD_SIGN_ANNEX_DOC_INFOS : VariableKeys.SIGN_ANNEX_DOC_INFOS;
            const annexData = SignUtil.getVariableMapVal(annexDataKey, []);
            let pathname = this.props.location.pathname, id="uploadadjustment";
            let stores = new Upload.Store({route:pathname});
            stores.setState({datas:annexData, id , editNameId:"resetname"});
            stores.list.setState({data:annexData});
            stores.initLayout(pathname);
            this.setState({stores: stores})
        }
    }

    render() {
        const {wfSignInputStore} = this.props;
        const {isForwad} = wfSignInputStore;
        const annexDataKey = isForwad ? VariableKeys.FORWARD_SIGN_ANNEX_DOC_INFOS : VariableKeys.SIGN_ANNEX_DOC_INFOS;
        const annexData = SignUtil.getVariableMapVal(annexDataKey, []);

        const wfOperateStore = base.wfOperateStore;
        const {markInfo = {}} = wfOperateStore;
        const signParams = mobx.toJS(markInfo);
        const {annexmaxUploadImageSize = 5} = signParams;

        //附件拖拽相关控制开始，
        const {remarkInfo = {}} = signParams;
        const {isdragula = false, isrename = false} = remarkInfo;
        let editable = false;
        let uploadParams = {};
        if(isdragula || isrename) {
            editable = true;
            uploadParams={"isFirstUploadFile":"9"}
        }
        //拖拽控制借宿
        return (

            <div className={'wf-sign-annex-list'}>
                <div className={'annex-upload'} style={{position: "relative", width:"100%", display: "inline-block"}}>
                    <div style={{float:"left", width:"50%"}}>
                        <Upload onChange={this.doChangeEvent.bind(this)}
                                maxUploadSize={annexmaxUploadImageSize}
                                uploadParams={uploadParams}
                                multiSelection={true}
                                onUploading={(type)=>SignUtil.onUploading(type,'annexlist')}
                                uploadUrl={'/api/doc/upload/uploadFile2Doc'}
                        >
                            <div className={'annex-upload-btn'} >
                                <Icon type={'plus'}/>
                                <span>{getLabel(500574,'上传附件')}</span>
                            </div>
                        </Upload>
                    </div>
                    {editable?this.getUploadMobile():""}
                </div>
                <div className={'annex-data-list'}>
                    <div>
                        {annexData && annexData.map((item, index) => {
                            const {fileid, filename, filesize} = item;
                            return (
                                <Flex className={'annex-row'}>
                                    <div className={'col-icon'}><Icon type={'delete-o'}
                                                                      onClick={() => this.deleteItem(fileid)}/></div>
                                    <div className={'col-info'}>
                                        <div className={'file-name'}>{filename}</div>
                                        <div className={'file-size'}>{filesize}</div>
                                    </div>
                                </Flex>
                            )
                        })}
                    </div>
                </div>
                {editable?this.getBottomBtn():""}
            </div>
        )

    }

    /**
     * 附件修改
     * @returns {*}
     */
    getUploadMobile = () =>{
        const {history} = this.props;
        const { stores} = this.state;
        return <div className={"showupdate"}
             onClick={() => history.push(stores.path)}
             style={{float: "right",textAlign:"center", color:"#55B1F9",width:"50%"}}>
            <div className={'annex-upload-btn'} >
                <Icon type={"list"}/>
                <span>{getLabel(506370, "显示调整")}</span>
            </div>
            <Route
                key={stores.id}
                path={stores.path}
                render={()=>(
                    <RouteLayout>
                        <Upload.EditList
                            editable={true}
                            className="wm-route-layout"
                            rowKey={"fileid"}
                            store={stores}
                            onChange={this.doChangeEventRename.bind(this)}
                        ></Upload.EditList>
                    </RouteLayout>
                )}
            />
        </div>
    }

    /**
     * 底部按钮
     * @returns {*}
     */
    getBottomBtn() {
        const {history} = this.props;
        const btns = [{
            key: "confirm",
            text: getLabel(826,"确定"),
            type: "primary",
            onClick: () => {
                history.go(-1);
            }
        }];
        return <RouteLayout.ButtonGroup data={btns}/>;
    }

    /**
     * 附件拖拽重命名相关操作
     * @param ids
     * @param filedatas
     */
    doChangeEventRename (ids, filedatas){
        const {wfSignInputStore} = this.props;
        const {isForwad, controlVariableMap} = wfSignInputStore;
        const annexDataKey = isForwad ? VariableKeys.FORWARD_SIGN_ANNEX_DOC_INFOS : VariableKeys.SIGN_ANNEX_DOC_INFOS;
        const annexData = SignUtil.getVariableMapVal(annexDataKey, []);
       controlVariableMap(annexDataKey, filedatas);
    }

    doChangeEvent(ids, filedatas) {
        const {wfSignInputStore} = this.props;
        const {isForwad, controlVariableMap} = wfSignInputStore;
        const annexDataKey = isForwad ? VariableKeys.FORWARD_SIGN_ANNEX_DOC_INFOS : VariableKeys.SIGN_ANNEX_DOC_INFOS;
        const annexData = SignUtil.getVariableMapVal(annexDataKey, []);
        const __annexData = annexData.concat(filedatas);
        controlVariableMap(annexDataKey, __annexData);
        this.getUploadStoresList();
    }

    deleteItem(fileid) {
        const {wfSignInputStore} = this.props;
        const {isForwad, controlVariableMap} = wfSignInputStore;
        const annexDataKey = isForwad ? VariableKeys.FORWARD_SIGN_ANNEX_DOC_INFOS : VariableKeys.SIGN_ANNEX_DOC_INFOS;
        const annexData = SignUtil.getVariableMapVal(annexDataKey, []);
        let __annexData = annexData.filter((item) => item.fileid !== fileid);
        controlVariableMap(annexDataKey, __annexData);
        this.getUploadStoresList();
        wfSignInputStore.deleteDoc({docid:fileid});
    }
}